"use client"

import { useState } from "react"
import { Dialog, DialogContent, DialogHeader } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Search, ArrowLeft } from "lucide-react"
import { cn } from "@/lib/utils"

interface Location {
  name: string
  address: string
  distance: number
}

interface LocationPickerProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  onSelect: (location: Location | null) => void
  currentLocation?: Location | null
}

export function LocationPicker({ open, onOpenChange, onSelect, currentLocation }: LocationPickerProps) {
  const [searchQuery, setSearchQuery] = useState("")
  const [hideLocation, setHideLocation] = useState(false)

  // 模拟的位置数据
  const locations: Location[] = [
    {
      name: "当前位置",
      address: "广东省深圳市南山区沙河街道侨香路4030号",
      distance: 0,
    },
    {
      name: "侨城北(地铁站)",
      address: "广东省深圳市南山区2号线(8号线)",
      distance: 70.46,
    },
    {
      name: "港龙舞蹈(华侨城校区)",
      address: "广东省深圳市南山区侨香路天鹅湖花园三期华侨城欢乐时光3层06号",
      distance: 145.29,
    },
    {
      name: "盒马鲜生(欢乐时光店)",
      address: "广东省深圳市南山区侨香路天鹅湖花园三期OCT PARK华侨城欢乐时光B1层",
      distance: 145.45,
    },
    // ... 更多位置数据
  ]

  const formatDistance = (distance: number) => {
    if (distance === 0) return ""
    if (distance >= 1000) {
      return `${(distance / 1000).toFixed(1)}km`
    }
    return `${Math.round(distance)}m`
  }

  const filteredLocations = locations.filter(
    (location) =>
      location.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      location.address.toLowerCase().includes(searchQuery.toLowerCase()),
  )

  const handleSelect = (location: Location | null) => {
    if (hideLocation) {
      onSelect(null)
    } else {
      onSelect(location)
    }
    onOpenChange(false)
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-md p-0 gap-0 bg-background/95 backdrop-blur-sm">
        <DialogHeader className="p-4 border-b">
          <div className="flex items-center justify-between">
            <Button variant="ghost" size="icon" className="shrink-0" onClick={() => onOpenChange(false)}>
              <ArrowLeft className="h-5 w-5" />
            </Button>
            <h2 className="text-lg font-normal flex-1 text-center">所在位置</h2>
            <div className="w-9"></div>
          </div>
        </DialogHeader>

        <div className="relative p-4 border-b">
          <Search className="absolute left-6 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
          <Input
            placeholder="搜索地点"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="pl-10 pr-4"
          />
        </div>

        <div className="max-h-[60vh] overflow-y-auto">
          <div className="p-4 border-b">
            <button
              className="w-full flex items-center justify-between py-2"
              onClick={() => setHideLocation(!hideLocation)}
            >
              <span className="text-base">不显示位置</span>
              <div
                className={cn(
                  "w-4 h-4 rounded-full border transition-colors",
                  hideLocation ? "bg-primary border-primary" : "border-muted-foreground",
                )}
              />
            </button>
          </div>

          <div className="divide-y divide-border">
            {filteredLocations.map((location, index) => (
              <button
                key={index}
                className="w-full text-left p-4 hover:bg-accent transition-colors"
                onClick={() => handleSelect(location)}
              >
                <div className="flex items-start justify-between gap-4">
                  <div className="flex-1 min-w-0">
                    <h3 className="font-medium mb-1 truncate">{location.name}</h3>
                    <p className="text-sm text-muted-foreground truncate">{location.address}</p>
                  </div>
                  {location.distance > 0 && (
                    <span className="text-sm text-muted-foreground whitespace-nowrap">
                      {formatDistance(location.distance)}
                    </span>
                  )}
                </div>
              </button>
            ))}
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}

